<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="main">
        <!--bxslider-->
        <link rel="stylesheet" href="css/jquery.bxslider.css">
        <script src="js/jquery.bxslider.js"></script> 
        <h3 style="text-align:center; font-size:24px;">示例1淡入(bxslider)</h3>
        <!-- banner1-->
        <div class="bannerPc banner banner1">
            <ul class="bxslider">
                <li><a href="#"><img src="images/b1.jpg" alt="" title=""/></a> </li>
                <li><a href="#"><img src="images/b2.jpg" alt="" title=""/></a> </li>
                <li><a href="#"><img src="images/b3.jpg" alt="" title=""/> </a></li>
                <li><a href="#"><img src="images/b4.jpg" alt="" title=""/> </a></li>
                <li><a href="#"><img src="images/b5.jpg" alt="" title=""/></a> </li>
            </ul>
            <script type="text/javascript">
                var scale = '';/*空、16*9、4*3、3*2*/
                var speed = 500;
                var pause = 5;
                $(function () {
                    $('.banner1 .bxslider').bxSlider({
                        mode: 'fade', /*滚动方式fade、vertical、horizontal*/
                        auto: true, /*自动滚动*/
                        autoControls: false, /*自动滚动按钮*/
                        infiniteLoop: true, /*循环滚动*/
                        hideControlOnEnd: true, /*无效按钮隐藏*/
                        adaptiveHeight: true, /*图片是否实际缩放比高度显示控制，图片比例不一样高度变化*/
                        minSlides: 1,
                        maxSlides: 1,
                        scale: scale,
                        speed: speed,
                        pause: pause * 1000
                    });
                });
            </script> 
        </div>
        <!-- banner1 end -->
        
        <h3 style="text-align:center; font-size:24px;">示例2左右滑(bxslider)</h3>
        <!-- banner2-->
        <div class="bannerPc banner banner2">
            <ul class="bxslider">
                <li><a href="#"><img src="images/b1.jpg" alt="" title=""/></a> </li>
                <li><a href="#"><img src="images/b2.jpg" alt="" title=""/></a> </li>
                <li><a href="#"><img src="images/b3.jpg" alt="" title=""/> </a></li>
                <li><a href="#"><img src="images/b4.jpg" alt="" title=""/> </a></li>
                <li><a href="#"><img src="images/b5.jpg" alt="" title=""/></a> </li>
            </ul>
            <script type="text/javascript">
                var scale = '';/*空、16*9、4*3、3*2*/
                var speed = 500;
                var pause = 5;
                $(function () {
                    $('.banner2 .bxslider').bxSlider({
                        mode: 'horizontal', /*滚动方式fade、vertical、horizontal*/
                        auto: true, /*自动滚动*/
                        autoControls: false, /*自动滚动按钮*/
                        infiniteLoop: true, /*循环滚动*/
                        hideControlOnEnd: true, /*无效按钮隐藏*/
                        adaptiveHeight: true, /*图片是否实际缩放比高度显示控制，图片比例不一样高度变化*/
                        minSlides: 1,
                        maxSlides: 1,
                        scale: scale,
                        speed: speed,
                        pause: pause * 1000
                    });
                });
            </script> 
        </div>
        <!-- banner2 end -->
        
        <h3 style="text-align:center; font-size:24px;">示例3上下滚动(bxslider)</h3>
        <!-- banner3-->
        <div class="bannerPc banner banner3">
            <ul class="bxslider">
                <li><a href="#"><img src="images/b1.jpg" alt="" title=""/></a> </li>
                <li><a href="#"><img src="images/b2.jpg" alt="" title=""/></a> </li>
                <li><a href="#"><img src="images/b3.jpg" alt="" title=""/> </a></li>
                <li><a href="#"><img src="images/b4.jpg" alt="" title=""/> </a></li>
                <li><a href="#"><img src="images/b5.jpg" alt="" title=""/></a> </li>
            </ul> 
            <script type="text/javascript">
                var scale = '';/*空、16*9、4*3、3*2*/
                var speed = 500;
                var pause = 5;
                $(function () {
                    $('.banner3 .bxslider').bxSlider({
                        mode: 'vertical', /*滚动方式fade、vertical、horizontal*/
                        auto: true, /*自动滚动*/
                        autoControls: false, /*自动滚动按钮*/
                        infiniteLoop: true, /*循环滚动*/
                        hideControlOnEnd: true, /*无效按钮隐藏*/
                        adaptiveHeight: true, /*图片是否实际缩放比高度显示控制，图片比例不一样高度变化*/
                        minSlides: 1,
                        maxSlides: 1,
                        scale: scale,
                        speed: speed,
                        pause: pause * 1000
                    });
                });
            </script> 
        </div>
        <!-- banner3 end -->
        <!--bxslider end-->
    
        <!--Swiper-->
        <link rel="stylesheet" href="css/swiper.min.css">
        <script src="js/swiper.min.js"></script> 
        <h3 style="text-align:center; font-size:24px;">示例4 2d多图 (Swiper)</h3>
        <!-- Swiper1-->
        <div class="swiper-container bannerPc banner-swiper banner-swiper1">
            <ul class="swiper-wrapper">
                <li class="swiper-slide"><a href="#"> <img src="images/b1.jpg" alt="" title=""/></a></li>
                <li class="swiper-slide"><a href="#"> <img src="images/b2.jpg" alt="" title=""/></a></li>
                <li class="swiper-slide"><a href="#"> <img src="images/b3.jpg" alt="" title=""/></a></li>
                <li class="swiper-slide"><a href="#"> <img src="images/b4.jpg" alt="" title=""/></a></li>
                <li class="swiper-slide"><a href="#"> <img src="images/b5.jpg" alt="" title=""/></a></li>
            </ul>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-pagination"></div>
        </div>
        <script type="text/javascript">
            var swiper = new Swiper('.banner-swiper1', {
              effect : 'slide',
              loop : true,
              speed:500,//切换速度
              centeredSlides : true,
              slidesPerView: 1.5,
              loopAdditionalSlides : 1,
              autoplay : {
                delay:2000,//展示时间
                disableOnInteraction: false
              },
              navigation: {
                 nextEl: '.swiper-button-next',
                 prevEl: '.swiper-button-prev',
              },
              pagination: {
                el: '.swiper-pagination',
                clickable: true,
              },
            });
          </script> 
        <!-- Swiper1 end -->
        
        <h3 style="text-align:center; font-size:24px;">示例5 层叠旋转木马(Swiper)</h3>
        <!-- Swiper2-->
        <div class="swiper-container bannerPc banner-swiper banner-swiper2">
            <ul class="swiper-wrapper">
                <li class="swiper-slide"><a href="#"> <img src="images/b1.jpg" alt="" title=""/></a></li>
                <li class="swiper-slide"><a href="#"> <img src="images/b2.jpg" alt="" title=""/></a></li>
                <li class="swiper-slide"><a href="#"> <img src="images/b3.jpg" alt="" title=""/></a></li>
                <li class="swiper-slide"><a href="#"> <img src="images/b4.jpg" alt="" title=""/></a></li>
                <li class="swiper-slide"><a href="#"> <img src="images/b5.jpg" alt="" title=""/></a></li>
                <li class="swiper-slide"><a href="#"> <img src="images/b5.jpg" alt="" title=""/></a></li>
            </ul>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-pagination"></div>
        </div>
        <script type="text/javascript">
        $(function () {
            var $bswp2=$('.banner-swiper2')
            var $bnccimg =  $bswp2.find('img');
            var img = new Image();	
                img.onload = function () {
                      var swiper = new Swiper($bswp2, {
                      effect : 'slide',
                      loop : true,
                      speed:500,//切换速度
                      watchSlidesProgress: true,
                      centeredSlides : true,
                      slidesPerView: 'auto',
                      loopedSlides: 5,
                      autoplay : {
                        delay:4000,//展示时间
                        disableOnInteraction: false
                      },
                      navigation: {
                         nextEl: '.swiper-button-next',
                         prevEl: '.swiper-button-prev',
                      },
                      pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                      },
                      on: {
                        progress: function(progress) {
                            var itemW=parseInt(this.slides.css('width'));
                            for (i = 0; i < this.slides.length; i++) {
                                var slide = this.slides.eq(i);
                                var slideProgress = this.slides[i].progress;
                                modify = 1;
                                if (Math.abs(slideProgress) > 1) {
                                    modify = (Math.abs(slideProgress) - 1) * 0.15 + 1;
                                }
                                translate = slideProgress * modify * itemW/1.5 + 'px';
                                var scaleSW = 1 - Math.abs(slideProgress) / 5;
                                zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                                slide.transform('translateX(' + translate + ') scale(' + scaleSW + ')');
                                slide.css('zIndex', zIndex);
                                slide.css('opacity', scaleSW);
                                if (Math.abs(slideProgress) > 5) {
                                    slide.css('opacity', 0);
                                }
                            }
                        },
                        setTransition: function(transition) {
                            for (var i = 0; i < this.slides.length; i++) {
                                var slide = this.slides.eq(i);
                                slide.transition(transition);
                            }
                
                        }
                     }
                    });
                }
                img.src = $bnccimg.attr("src");	
            });    
          </script> 
        <!-- Swiper2 end -->
        
        <h3 style="text-align:center; font-size:24px;">示例6 缩略图(Swiper)</h3>
        <!-- Swiper3-->
        <div class="bannerPc banner-swiper banner-swiper3">
            <div class="swiper-container view">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide"><a href="#"> <img src="images/b1.jpg" alt="" title=""/></a></li>
                    <li class="swiper-slide"><a href="#"> <img src="images/b2.jpg" alt="" title=""/></a></li>
                    <li class="swiper-slide"><a href="#"> <img src="images/b3.jpg" alt="" title=""/></a></li>
                    <li class="swiper-slide"><a href="#"> <img src="images/b4.jpg" alt="" title=""/></a></li>
                    <li class="swiper-slide"><a href="#"> <img src="images/b5.jpg" alt="" title=""/></a></li>
                </ul>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
            <div class="swiper-container preview">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide active-nav"><img src="images/b1.jpg"/></li>
                    <li class="swiper-slide"><img src="images/b2.jpg"/></li>
                    <li class="swiper-slide"><img src="images/b3.jpg"/></li>
                    <li class="swiper-slide"><img src="images/b4.jpg"/></li>
                    <li class="swiper-slide"><img src="images/b5.jpg"/></li>
                </ul>
            </div>
        </div>
        <script type="text/javascript">
        var $bn_swiper3=$('.banner-swiper3');
        var viewSwiper = new Swiper($bn_swiper3.find('.view'), {
            effect : 'slide',
            speed:500,//切换速度
            autoplay : {
                delay:4000,//展示时间
                disableOnInteraction: false
            },
            on:{
                slideChangeTransitionStart: function() {
                    updateNavPosition()
                }
            }
        })
        
        $bn_swiper3.find('.view .swiper-button-prev').on('click', function(e) {
            e.preventDefault()
            if (viewSwiper.activeIndex == 0) {
                viewSwiper.slideTo(viewSwiper.slides.length - 1, 1000);
                return
            }
            viewSwiper.slidePrev()
        })
       $bn_swiper3.find('.view .swiper-button-next').on('click', function(e) {
            e.preventDefault()
            if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
                viewSwiper.slideTo(0, 1000);
                return
            }
            viewSwiper.slideNext()
        })
        var bnLiLeight=$bn_swiper3.find('.preview li').length;
        var previewSwiper = new Swiper($bn_swiper3.find('.preview'), {
            slidesPerView: bnLiLeight,
            allowTouchMove: false,
            on:{
                tap: function() {
                    viewSwiper.slideTo(previewSwiper.clickedIndex)
              }
            }
        })
        
        function updateNavPosition() {
                $bn_swiper3.find('.preview .active-nav').removeClass('active-nav')
                var activeNav = $bn_swiper3.find('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
                if (!activeNav.hasClass('swiper-slide-visible')) {
                    if (activeNav.index() > previewSwiper.activeIndex) {
                        var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
                        previewSwiper.slideTo(activeNav.index() - thumbsPerNav)
                    } else {
                        previewSwiper.slideTo(activeNav.index())
                    }
                }
            }
        </script> 
        <!-- Swiper3 end-->
         <!--Swiper end-->
    
        <h3 style="text-align:center; font-size:24px;">示例7 百叶窗(osSlider)</h3>
        <!-- osSlide-->
        <div class="bannerPc banner-osSlider">
            <ul>
                <li><a href="#"><img src="images/b1.jpg" alt="" title=""/></a> </li>
                <li><a href="#"><img src="images/b2.jpg" alt="" title=""/></a> </li>
                <li><a href="#"><img src="images/b3.jpg" alt="" title=""/> </a></li>
                <li><a href="#"><img src="images/b4.jpg" alt="" title=""/> </a></li>
                <li><a href="#"><img src="images/b5.jpg" alt="" title=""/></a> </li>
            </ul>
        </div>
        <script type="text/javascript" src="js/osSlider.js"></script> 
        <script type="text/javascript">
        $(function () {
          var $bswpOs = $('.banner-osSlider');
          var $bnccimgOs = $bswpOs.find('img');
          var img = new Image();
          img.onload = function(){
            var sliderOS = new osSlider({ //开始创建效果
              pNode: $bswpOs, //容器的选择器 必填
              cNode: 'ul li',
              speed: 4000, //展示时间
              speedRun: 1000, //切换速度
              autoPlay: true
            });
          }
          img.src = $bnccimgOs.attr("src");
        });
        </script> 
        <!-- osSlide end-->
        
        <h3 style="text-align:center; font-size:24px;">示例8 3D翻转(ccslider)</h3>
        <!-- ccslider-->
        <!--"effect":["cubeUp", "cubeDown", "cubeRight", "cubeLeft", "flipUp", "flipDown", "flipRight", "flipLeft", "blindsVertical", "blindsHorizontal", "gridBlocksUp", "gridBlocksDown", "gridBlocksLeft", "gridBlocksRight"] -->
        <div class="bannerPc banner-ccslide">
            <img src="images/b1.jpg" alt="" data-href="https://www.baidu.com" data-transition='{"effect": "cubeRight", "slices": 5}'/>
            <img src="images/b2.jpg" alt="" data-href="https://www.baidu.com" data-transition='{"effect": "cubeUp", "slices": 9}' />
            <img src="images/b3.jpg" alt="" data-href="https://www.baidu.com" data-transition='{"effect": "cubeLeft", "slices": 5}' />
            <img src="images/b4.jpg" alt="" data-href="https://www.baidu.com" data-transition='{"effect": "cubeDown", "slices": 9}' />
            <img src="images/b5.jpg" alt="" data-href="https://www.baidu.com" data-transition='{"effect": "flipUp", "slices": 9}' />
            <img src="images/b1.jpg" alt="" data-href="https://www.baidu.com" data-transition='{"effect": "flipDown", "slices": 9}'/>
            <img src="images/b2.jpg" alt="" data-href="https://www.baidu.com" data-transition='{"effect": "flipRight", "slices": 5}' />
            <img src="images/b3.jpg" alt="" data-href="https://www.baidu.com" data-transition='{"effect": "flipLeft", "slices": 5}' />
            <img src="images/b4.jpg" alt="" data-href="https://www.baidu.com" data-transition='{"effect": "blindsVertical", "slices": 9}' />
            <img src="images/b5.jpg" alt="" data-href="https://www.baidu.com" data-transition='{"effect": "blindsHorizontal", "slices": 5}' />
            <img src="images/b2.jpg" alt="" data-href="https://www.baidu.com" data-transition='{"effect": "gridBlocksUp", "slices": 9}' />
            <img src="images/b3.jpg" alt="" data-href="https://www.baidu.com" data-transition='{"effect": "gridBlocksDown", "slices": 9}' />
            <img src="images/b4.jpg" alt="" data-href="https://www.baidu.com" data-transition='{"effect": "gridBlocksLeft", "slices": 5}' />
            <img src="images/b5.jpg" alt="" data-href="https://www.baidu.com" data-transition='{"effect": "gridBlocksRight", "slices": 5}' />
        </div>
        <link rel="stylesheet" href="css/ccslider.css">
        <script src="js/jquery-migrate-1.1.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.ccslider-3.0.2.min.js"></script> 
        <script type="text/javascript">
        $(function () {
            var $bnccimg =  $('.banner-ccslide img').eq(0);
            var img = new Image();	
                img.onload = function () {
                $('.banner-ccslide').css({'height':$bnccimg.innerHeight()});
                $('.banner-ccslide').ccslider({
                    pauseTime: 4000,
                    animSpeed: 1000,
                    pauseOnHover: false,
                    _3dOptions: {
                            imageWidth: $bnccimg.innerWidth(),
                            imageHeight: $bnccimg.innerHeight()					
                    }
                });
            }
            img.src = $bnccimg.attr("src");
            
        });
        </script> 
        <!-- ccslider end-->
        
        <h3 style="text-align:center; font-size:24px;">示例9 混搭(html5zoo)</h3>
        <!-- html5zoo-->
        <div class="bannerPc" >
            <div class="banner-html5zoo" id="html5zoo-1" >
                <ul class="html5zoo-slides">
                    <li><img src="images/b1.jpg" alt="" title=""/></li>
                    <li><a href="#"><img src="images/b2.jpg" alt="" title=""/></a> </li>
                    <li><img src="images/b3.jpg" alt="" title=""/></li>
                    <li><img src="images/b4.jpg" alt="" title=""/></li>
                    <li><img src="images/b5.jpg" alt="" title=""/></li>
                </ul>
                <div class="slicebox-pagination"></div>
            </div>
        </div>
        <script type="text/javascript" src="js/html5zoo.js"></script> 
        <script type="text/javascript">//lovelygallery.js
        $(function(){
        var scripts = document.getElementsByTagName("script");
        var jsFolder = "";
        for (var i= 0; i< scripts.length; i++)
        {
            if( scripts[i].src && scripts[i].src.match(/lovelygallery\.js/i))
                jsFolder = scripts[i].src.substr(0, scripts[i].src.lastIndexOf("/") + 1);
        }
        var speed_hl5z=500;//切换速度
        var interval_hl5z=4000;// 展示时间
        var win_width = $(window).width();
        var hl5z_height;
        var $html5zoo1=$("#html5zoo-1");
        $html5zoo1.html5zoo({
            jsfolder:jsFolder,
            pauseonmouseover:false,
            slideinterval:interval_hl5z,     
            autoplay:true, 
            navposition:"bottom",
            arrowhideonmouseleave:win_width,
            texteffectduration:win_width,
            navshowfeaturedarrow: false,
            navmarginy:-40,
            slide: {//左右滑
                duration:speed_hl5z,
                easing:"easeOutCubic",
                checked:true
            },
            crossfade: {//
                duration:speed_hl5z,
                easing:"easeOutCubic",
                checked:true
            },
            threedhorizontal: {//3d方块左右
                checked:true,
                bgcolor:"#222222",
                perspective:win_width,
                slicecount:1,
                duration:speed_hl5z*1.5,
                easing:"easeOutCubic",
                fallback:"slice",
                scatter:5,
                perspectiveorigin:"bottom"
            },
            slice: {//手风琴
                duration:speed_hl5z * 3,
                easing:"easeOutCubic",
                checked:true,
                effects:"up,down,updown",
                slicecount:10
            },
            fade: {
                duration:speed_hl5z,
                easing:"easeOutCubic",
                checked:true
            },
            blocks: {//马赛克渐变
                columncount:5,
                checked:true,
                rowcount:5,
                effects:"topleft,bottomright,top,bottom,random",
                duration:speed_hl5z*3,
                easing:"easeOutCubic"
            },
            blinds: {//图片切割左右滑入
                duration:speed_hl5z*2,
                easing:"easeOutCubic",
                checked:true,
                slicecount:3
            },
            shuffle: {//马赛克飞入飞出
                duration:speed_hl5z*2.5,
                easing:"easeOutCubic",
                columncount:5,
                checked:true,
                rowcount:5
            },
            threed: {//3d方块上下
                checked:true,
                bgcolor:"#222222",
                perspective:win_width,
                slicecount:5,
                duration:speed_hl5z*2,
                easing:"easeOutCubic",
                fallback:"slice",
                scatter:5,
                perspectiveorigin:"right"
            },
            transition:"slide,threedhorizontal,slice,fade,blocks,blinds,shuffle,threed"
        });
    });
        </script>
        <!-- html5zoo end-->
        
        <h3 style="text-align:center; font-size:24px;">示例10 手风琴(html5zoo)</h3>
        <!-- html5zoo-->
        <div class="bannerPc" >
            <div class="banner-html5zoo" id="html5zoo-2" >
                <ul class="html5zoo-slides">
                    <li><img src="images/b1.jpg" alt="" title=""/></li>
                    <li><a href="#"><img src="images/b2.jpg" alt="" title=""/></a> </li>
                    <li><img src="images/b3.jpg" alt="" title=""/></li>
                    <li><img src="images/b4.jpg" alt="" title=""/></li>
                    <li><img src="images/b5.jpg" alt="" title=""/></li>
                </ul>
                <div class="slicebox-pagination"></div>
            </div>
        </div>
        <script type="text/javascript" src="js/html5zoo.js"></script> 
        <script type="text/javascript">//lovelygallery.js
        $(function(){
        var scripts = document.getElementsByTagName("script");
        var jsFolder = "";
        for (var i= 0; i< scripts.length; i++)
        {
            if( scripts[i].src && scripts[i].src.match(/lovelygallery\.js/i))
                jsFolder = scripts[i].src.substr(0, scripts[i].src.lastIndexOf("/") + 1);
        }
        var speed_hl5z=500;//切换速度
        var interval_hl5z=4000;// 展示时间
        var win_width = $(window).width();
        var hl5z_height;
        var $html5zoo1=$("#html5zoo-2");
        $html5zoo1.html5zoo({
            jsfolder:jsFolder,
            pauseonmouseover:false,
            slideinterval:interval_hl5z,     
            autoplay:true, 
            navposition:"bottom",
            arrowhideonmouseleave:win_width,
            texteffectduration:win_width,
            navshowfeaturedarrow: false,
            navmarginy:-40,
            slice: {//手风琴
                duration:speed_hl5z * 3,
                easing:"easeOutCubic",
                checked:true,
                effects:"up,down,updown",
                slicecount:10
            },
            transition:"slice",
        });
    });
        </script>
        <!-- html5zoo end-->
        
        <div style="height:100px"></div>
    </div>
    </body>

</html>